<template>
  <div id="common-component">
    <Row type='flex' justify="space-between" style="padding:20px">
      <Row type='flex' align="middle">
        <Col style="margin-right:8px">
          <span>门店名称：</span>
        </Col>
        <Col>
          <Select :value="searchShopName" filterable :clearable='true' @on-change='changeStore' @on-clear='changeStore'>
            <Option v-for="item in shopList" :value="item.shopName" :key="item.shopId">{{ item.shopName }}</Option>
          </Select>
        </Col>
        <Col>
        <Button type="primary" style="margin-left:24px;width:80px" @click="changeStore(searchShopName)">查询</Button>
      </Col>
      </Row>
      <Col>
        <Button @click="allSet">批量设置</Button>
      </Col>
    </Row>
    <Table :columns="columns" :data="tableData" stripe :height='tableHeight' class="table-list" :loading='loading'>
      <template slot-scope="{ row }"
                slot="soltCount">
        <span class="specail" @click="skipSlit(row,'1')">{{row.soltCount}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="undoCount">
        <span class="specail" @click="skipSlit(row,'0')">{{row.undoCount}}</span>
      </template>
      <template slot-scope="{ row }"
                slot="action">
        <i class="iconsys iconsetting" @click="viewHistory('1', row)"
           title="设置"></i>
        <i class="iconsys iconzhongqi" @click="restart(row.orgId)"
           title="重启"></i>
          <i class="iconsys iconlishijilu" @click="viewHistory('2', row)"
             title="历史记录"></i>
      </template>
    </Table>
    <Row type='flex' justify="end" style="padding:20px">
      <Col>
        <Page :total="pageObj.total"
            :current="pageObj.pageIndex"
            :page-size="pageObj.pageSize"
            show-sizer
            show-total
            @on-change='changePageIndex'
            @on-page-size-change='changePageSize' />
      </Col>
    </Row>
  </div>
</template>

<script>
import { getShopList } from '@/api/system/store'
import { shopRestart } from '@/api/setting'
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    searchShopName: {
      type: String,
      default: ''
    },
    tableHeight: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      default: () => []
    },
    pageObj: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      shopList: [],
      columns: [
        {
          title: '门店名称',
          key: 'orgName'
        },
        {
          title: '机台总数',
          key: 'machineInstanceCount'
        },
        {
          title: '投币口数量',
          slot: 'soltCount'
        },
        {
          title: '未执行数量',
          slot: 'undoCount'
        },
        {
          title: '操作时间',
          key: 'operTime'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ]
    }
  },
  methods: {
    // changeStore (value) {
    //   if (value.value && value.label) {
    //     this.$emit('changeStore', value)
    //   } else {
    //     this.$emit('changeStore', '')
    //   }
    // },
    changeStore (value) {
      if (value) {
        this.$emit('changeStore', value)
      } else {
        this.$emit('changeStore', '')
      }
    },
    allSet () {
      this.$emit('allSet')
    },
    skipSlit (row, type) {
      this.$emit('skipSlit', row, type)
    },
    restart (shopId) {
      // this.$emit('restart', shopId)
      if (shopId) {
        shopRestart({
          shopId: shopId
        }).then(res => {
          if (res.data.status === 200) {
            this.$Message.success('重启成功！')
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
      } else {
        this.$Message.error('门第id不能为空')
      }
    },
    viewHistory (type, row) {
      this.$emit('viewHistory', type, row)
    },
    changePageIndex (pageIndex) {
      this.$emit('changePageIndex', pageIndex)
    },
    changePageSize (pageSize) {
      this.$emit('changePageSize', pageSize)
    },
    // 获取门店列表
    chooseShopList () {
      getShopList({ 'merchantId': this.$store.state.user.merchantId, offset: '0', limit: '5000' }).then(res => {
        if (res.data.status === 200) {
          this.shopList = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      }).catch((err) => {
        this.$Message.error(`${err}`)
      })
    }
  },
  mounted () {
    this.chooseShopList()
  }
}
</script>

<style lang='less'>
  #common-component{
    .specail {
      color: #2D8CF0;
      cursor: pointer;
    }
  }
</style>
